<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>wingcloud大屏展示</title>
    <link rel="stylesheet" href="show.css">
    <link rel="stylesheet" href="../admin/main.css">


</head>
<body class="body">
<!--第一层栅格，整体框架布局，以3:6:3的比例-->
<div class="wrapper">
   <div class="container-fluid">
       <div class="row fill-hight">
           <!--商品热销榜单top5滚动图-->
           <div class="col-lg-3 fill-hight" style="border: 1px #eeeeee solid;color: #eeeeee">
               <div class="row">
                   <div class="col-lg-12 col-md-12 col-sm-12 col-12 message" style=" border: 1px #eeeeee solid;color: #eeeeee">
                       <p class="p">商品热销榜单top5</p>
                           <div class="row">
                               <div class="col-lg-4 col-md-4 col-sm-4 col-4"  >
                                       <p class="p1">商品ID</p>
                                       <div></div>
                                       <div class="scroll scroll-box-1" >
                                           <ul>
                                               <li>北京国信创新科技股</li>
                                               <li>青岛前丰国际帽艺股</li>
                                               <li>宗申产业集团有限公</li>
                                               <li>北京凯思柏亿珠宝</li>
                                               <li>科比环保科技有</li>
                                               <li>盛世渝捷科技有限公司</li>
                                               <li>青岛环球服装股份有限</li>
                                               <li>上海碗礁教育科技股份</li>
                                               <li>天津派纳特科技有限公</li>
                                               <li>天津维度防爆工具有</li>
                                               <li>重庆润之宜时尚电子商务</li>
                                               <li>博雅视云（北京）科技有</li>
                                               <li>北京盛玉合一文化传播有</li>
                                               <li>重庆金冠汽车制造股份有限</li>
                                               <li>重庆市国土资源和房屋勘</li>
                                           </ul>
                                       </div>
                               </div>
                               <div class="col-lg-4 col-md-4 col-sm-4 col-4">
                                   <p class="p2">商品名称</p>
                                   <div class="scroll-1 scroll-box-2">
                                       <ul>
                                           <li>网建</li>
                                           <li>全案</li>
                                           <li>视频</li>
                                           <li>全案</li>
                                           <li>网站维护</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>印刷</li>
                                           <li>工业设计</li>
                                           <li>品牌</li>
                                           <li>网建</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                       </ul>
                                   </div>
                               </div>
                               <div class="col-lg-4 col-md-4 col-sm-4 col-4" >
                                   <p class="p2">订单量</p>
                                   <div class="scroll-1 scroll-box-3">
                                       <ul>
                                           <li>网建</li>
                                           <li>全案</li>
                                           <li>视频</li>
                                           <li>全案</li>
                                           <li>网站维护</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>印刷</li>
                                           <li>工业设计</li>
                                           <li>品牌</li>
                                           <li>网建</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                           <li>品牌</li>
                                       </ul>
                                   </div>
                               </div>
                           </div>
                   </div>
               </div>
               <div class="layout">
                   <div class="fill-hight" id="piechart"></div>
               </div>
           </div>
           <div class="col-lg-6 fill-hight"style="border: 1px #eeeeee solid;color: #eeeeee">
               <div class="row">
                   <div class="col-lg-12 col-md-12 col-sm-12 col-12" style="margin-top: 15%;border: 1px #eeeeee solid;color: #eeeeee">
                           北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                       北京国信创新科技股<br>
                   </div>
               </div>
           </div>
           <div class="col-lg-3"style="border: 1px #eeeeee solid;color: #eeeeee">
           </div>
       </div>
   </div>
</div>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/echarts .js"></script>
<script src="show.js"></script>
<script type="text/javascript">
    $(function() {
        /********************男女比例饼图************************/
        const piechart = echarts.init(document.getElementById('piechart'));
        const pieoption = {
            // backgroundColor: '#2c343c',

            title: {
                text: '男女比例',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#ccc'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 80,
                max: 600,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'访问来源',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '50%'],
                    data:[
                        // {value:335, name:'直接访问'},
                        {value:310, name:'男'},
                        // {value:274, name:'联盟广告'},
                        // {value:235, name:'视频广告'},
                        {value:400, name:'女'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        piechart.setOption(pieoption);
        window.onresize = function() {    //当窗口改变时，自动调整图表大小，自适应
            piechart.resize();

        }
    });
</script>
</body>
</html>